<template>
  <div class="app-container">
    <el-button @click="clickFn">默认按钮</el-button>
    <editor v-model="state.content" :init="state.setting" />
  </div>
</template>

<script setup name="email">
import axios from "axios";
import Cookies from "js-cookie";
  import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
  import Editor from '@tinymce/tinymce-vue'//编辑器引入
  import 'tinymce/themes/silver/theme'//编辑器主题
  import 'tinymce/icons/default'  //引入编辑器图标icon，不引入则不显示对应图标
  // 引入编辑器插件（基本免费插件都在这儿了）
  import 'tinymce/plugins/advlist'  //高级列表
  import 'tinymce/plugins/autolink'  //自动链接
  import 'tinymce/plugins/link'  //超链接
  import 'tinymce/plugins/image'  //插入编辑图片
  import 'tinymce/plugins/lists' //列表插件
  import 'tinymce/plugins/charmap'  //特殊字符
  import 'tinymce/plugins/media' //插入编辑媒体
  import 'tinymce/plugins/wordcount'// 字数统计

const state = reactive({
  // editor 配置项
  content: "hello vue3-tinymce!",
  setting: {
    height: 500,
    language: "zh_CN", //注意大小写
    language_url: "/tinymce/lang/zh_CN.js",
    plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table paste code help wordcount",
    ],
    toolbar: {
      type: [String, Array],
      default:
        "undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat",
    },
    images_upload_handler: function (blobInfo, success, failure) {
      //文件上传的formData传递，忘记为什么要用这个了
      const isAccord =
        blobInfo.blob().type === "image/jpeg" ||
        blobInfo.blob().type === "image/png" ||
        blobInfo.blob().type === "image/GIF" ||
        blobInfo.blob().type === "image/jpg" ||
        blobInfo.blob().type === "image/BMP";
      if (blobInfo.blob().size / 1024 / 1024 > 2) {
        failure("上传失败，图片大小请控制在 2M 以内");
      } else if (blobInfo.blob().type == isAccord) {
        failure("图片格式错误");
      } else {
        let formData = new FormData();
        // 服务端接收文件的参数名，文件数据，文件名
        formData.append("file", blobInfo.blob(), blobInfo.filename());
        axios({
          method: "POST",
          headers: {
            Authorization: "bearer " + Cookies.get("access_token"),
          },
          // 这里是你的上传地址
          url: window.SITE_CONFIG["apiURL"] + "/oss/file/upload",
          data: formData,
        })
          .then((res) => {
            console.log(res);
            // 这里返回的是你图片的地址
            success(res.data.data.url);
          })
          .catch(() => {
            failure("上传失败");
          });
      }
    },
  },
});

function clickFn() {
  console.log(state.content);
}
</script>
<style lang="scss"></style>
